<template>
    <div id="tsbtStatistics">
        <low-chart :title="title">
            <div id="tsbtStatistics_box">
                <div id="boxes">
                    <div class="scroll">
                        <ul :class="{animatedTop}">
                            <li v-for="(item,index) in scrollList" :key="index">
                                {{item.content}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </low-chart>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import lowChart from 'components/content/lowChart/lowChart3'
    import {getNotice} from "../../../network/home";
    export default {
        name: "tsbtStatistics",
        data() {
            return {
                timer:null,
                animatedTop: false,
                scrollList: [
                    // {id: 0, content: '会议通知会议通知会议通知会议通知会议通知', time: '2019-11-27'},
                    // {id: 2, content: '电梯故障通知sssssssssssssssssssssssssssss', time: '2019-11-27'},
                    // {id: 3, content: '停车通知停车通知停车通知停车通知停车通知停车通知停车通知停车通知', time: '2019-11-27'},
                    // {id: 4, content: '停水通知hahahhah哈哈哈哈哈哈哈哈哈', time: '2019-11-27'},
                    // {id: 5, content: '社区互动社区互动社区互动社区互动社区互动', time: '2019-11-27'},
                ],
            }
        },
        props: {
            title: {
                type: String,
                default: "统计类目"
            }
        },
        components: {
            lowChart
        },
        mounted() {
            this.getNotice()
            this.timer = setInterval(() => {
                this.getNotice();
            },30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('右下关闭')
            }
        },
        methods: {
            getNotice() {
                getNotice().then(res=>{
                    // console.log(res.data)
                    if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                        clearInterval(this.timer); //关闭
                    }
                    if(res.data.length==0){
                        return
                    }else{
                        this.scrollList = res.data
                        this.timer = setInterval(() => {
                            this.showScroll();
                        }, 6000);
                    }
                })
            },
            showScroll() {
                this.animatedTop = true;
                setTimeout(() => {
                    this.scrollList.push(this.scrollList[0]);
                    this.scrollList.shift();
                    this.animatedTop = false
                }, 500)
            }
        }
    }
</script>

<style scoped>
    #tsbtStatistics {
        margin-top: 15px;
    }

    #tsbtStatistics_box {
        width: 609px;
        height: 277px;
    }


    #boxes{
        display: flex;
        align-items: center;
        margin: 20px 20px 0 20px;
        border-radius: 20px;
    }

    .animatedTop {
        transition: all .5s;
        margin-top: -1.7em;
    }

    .scroll {
        /*border: 2px solid #0182DD;*/
        padding:10px 20px 30px 20px;
        height: 180px;
        margin-left: 20px;
        overflow: hidden;
        font-size: 20px;
        color: #00f5ff;
        line-height: 160%;
        border-radius: 15px;
    }

    ul, li {
        padding: 0;
        margin: 0;
    }

    li {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        /*white-space: nowrap;*/
        margin-bottom: 5px;
    }
</style>
